<template>
	<div class="tuijian">
		<div class="header">
			<router-link to="">
				<img src="../assets/jtz.png" alt="">
			</router-link>
			<p id="tui">推荐有奖</p>
		</div>
		<div class="akl">
			<img src="../assets/fanxian.png" alt="">
		</div>
		<div class="we">
			<div>
				<img src="../assets/weixin.png" alt="">
				<p>邀请微信好友</p>
			</div>
			<div>
				<img src="../assets/QQ.png" alt="">
				<p>邀请QQ好友</p>
			</div>
			<div>
				<img src="../assets/ma.png" alt="">
				<p>面对面邀请</p>
			</div>
		</div>
		<div class="skt">
			<div>
				<p>累计收益</p>
				<p><span  style="color: orange;font-size:1.4rem">0</span>元</p>
			</div>
			<div style="border-left: 1px solid #CCCCCC;">
				<p>累计邀请</p>
				<p><span>0</span>人</p>
			</div>
		</div>
		<div style="text-align: center;font-size: 0.8rem;">-收益明细-</div>
		<div style="text-align: center;padding-top: 1.5rem;">
			<img src="../assets/bao.png" alt="">
			<p style="font-size: 0.8rem; color: #AAAAAA;">还不赶紧去邀请好友</p>
		</div>
	</div>
</template>

<script>
</script>

<style scoped>
	* {
		padding: 0;
		margin: 0;
		list-style: none;
	}
	
	.tuijian {
		overflow: hidden;
		width: 100%;
		background: rgba(0, 0, 0, 0.01);
	}
	
	.header {
		position: fixed;
		height: 3rem;
		background: #3190e8;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000000;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}
	
	.header img {
		position: absolute;
		top: 0;
		left: 0;
		width: 2.6rem;
	}
	
	#tui {
		font-size: 1.3rem;
		color: white;
		font-weight: 570;
		margin: 0 auto;
	}
	.akl{
		width: 100%;
		padding-top: 3rem;
	}
	.akl img{
		width: 100%;
	}
	.we{
		width: 100%;
		display: flex;
		margin-top: 0.5rem;
		background: white;
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
	.we div{
		width: 33.33%;
		text-align: center;
	}
	.skt{
		width: 100%;
		display: flex;
		padding-top: 2rem;
		padding-bottom: 1rem;
	}
	.skt div{
		width: 50%;
		text-align: center;
	}
</style>
